<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>宿舍成员 - 青春宿舍之家</title>
<link rel="stylesheet" href="css/styles.css">
</head>
<body>
<header class="header">
<div class="logo">青春宿舍</div>
<nav class="nav-menu">
<a href=" ">首页</a >
<a href="members.html">宿舍成员</a >
<a href="stories.html">宿舍故事</a >
<a href="about.html">关于我们</a >
</nav>
<button class="mobile-menu-btn">☰</button>
</header>

<section class="banner">
<h1>我们的家庭成员</h1>
</section>

<main class="main-content">
<!-- 成员介绍 -->
<section class="section">
<h2>成员列表</h2>
<div class="card-grid">
<!-- 成员卡片1 -->
<div class="card member-card">
< img src="images/member1.jpg" alt="张三">
<div class="card-content">
<h3>张三</h3>
<p>计算机科学专业</p >
<p>兴趣爱好：编程、篮球</p >
<p class="signature">"Stay hungry, stay foolish"</p >
</div>
</div>

<!-- 成员卡片2 -->
<div class="card member-card">
< img src="images/member2.jpg" alt="李四">
<div class="card-content">
<h3>李四</h3>
<p>艺术设计专业</p >
<p>兴趣爱好：绘画、摄影</p >
<p class="signature">"艺术改变生活"</p >
</div>
</div>
<!-- 更多成员卡片 -->
</div>
</section>

<!-- 值日表 -->
<section class="section">
<h2>值日安排</h2>
<table class="duty-table">
<tr>
<th>星期</th>
<th>值日生</th>
<th>职责</th>
</tr>
<tr>
<td>周一</td>
<td>张三</td>
<td>倒垃圾、擦桌子</td>
</tr>
<!-- 更多表格行 -->
</table>
</section>
</main>

<footer class="footer">
<p> 2023 青春宿舍 保留所有权利</p >
<p>联系我们: dorm@example.com</p >
</footer>

<script src="js/scripts.js"></script>
</body>
</html>